<template>
  <view class="page-list">
    <loading :showLoaded.sync="showLoaded"></loading>
    <navBar :navbarData.sync="navbarData"></navBar>
    <wxParse :identifier.sync='identifier' :enableLoad.sync="enableLoad"> </wxParse>
    <view class="list-container">
      <view class="list-content">
        <view class="list-item" v-for="(item,index) in list" :key="index" @click="skipItem(item)">
          <view class="item-l">
            <image class="img" :src="item.majorUrl ? item.majorUrl : item.hoverUrl"></image>
            <view class="sale-out" v-if="item.frontQty < 1">已售罄</view>
          </view>
          <view class="item-r " :class="item.pointsRateDisplay?'ts-tag':''">
            <view class="title">{{item.itemName}}</view>
            <view class="general-tag" v-if="item.pointsRateDisplay">
              <view class="m-icon">M</view>
              <view class="m-tag">{{ item.pointsRateLabel }}</view>
            </view>
            <view class="info">{{item.propertyName + ':'}}{{item.valueName}}</view>
            <view class="price"><label class="rmb">¥</label>{{filterChecked.moneyFormat(item.price / 1, 2)}}</view>
          </view>
        </view>
        <view class="hasMore">已到页面底部</view>
      </view>
    </view>
    <register-widget ref="registerWidgetRef" location="specialList" :tsActId="tsActId" />
  </view>
</template>
<script module="filterChecked" lang="wxs" src="@/utils/filter.wxs"></script>
<script>
  import api from '@/api/api';
  import NavBar from '@/components/common/navbar';
  import wxParse from "@/components/wxparse/wxparse.vue";
  import Loading from '@/components/common/loading';
  import registerWidget from "@/components/register/register-widget.vue"
  export default {
    components: {
      wxParse,
      NavBar,
      Loading,
      registerWidget
    },
    data() {
      return {
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '特邀会员专场',
          hideSearch: true,
          hideHome: true,
        },
        tsActId: '',
        identifier: '',
        list: [],
        enableLoad: true,
        showLoaded:true
      }
    },
    onLoad(opt) {
      this.tsActId = opt.tsActId
      this.identifier = `cms/specialsale${opt.tsActId}`
    },
    onShow() {
      this.getGoodsIdArr()
    },
    methods: {
      getGoodsIdArr() {
        this.$commonFunction.getTsById(this.tsActId).then((result) => {
          let arr = this.sliceArray(result.applySkuCodes, 20);
          this.getListData(arr,result.items)
        }).catch(() => {

        })
      },
      sliceArray(array, size) {
        var result = [];
        for (var i = 0; i < Math.ceil(array.length / size); i++) {
          var start = i * size;
          var end = start + size;
          result.push(array.slice(start, end));
        }
        return result;
      },

      async getListData(arr,orginArr) {
        try {
          let result, list = []
          const processList = arr.map((item) => {
            return new Promise(async (resolve) => {
              let str = item.join(',')
              const list = await this.getAllGoodsList(str)
              resolve(list)
            })
          })
          result = await Promise.all(processList)
          list = result.flat().sort((a, b) => b.frontQty === 0 ?  -1: 0)
          list.map(item => {
            orginArr.map(itey => {
              if (itey.itemId == item.itemId) {
                item.pointsRateDisplay = itey.pointsRateDisplay
                item.pointsRateLabel = itey.pointsRateLabel
              }
            })
          })
          this.list = list.sort((a, b) => b.frontQty === 0 ?  -1: 0)
          this.showLoaded = false
        } catch (error) {}
      },
      async getAllGoodsList(str) {
        try {
          let result = []
          let merchantInfo = uni.getStorageSync("merchantInfo");
          let memberDetails = uni.getStorageSync("memberDetails");
          const json = await api.getAllGoodsList({
            query: {
              q: str,
              class_id: "",
              page_no: 1,
              page_size: 20,
              store_id: merchantInfo.cloudMerchantStoreId,
              merchant_id: merchantInfo.cloudMerchantId,
              group_id: !!memberDetails ? memberDetails.customerGroupId : 0,
              member_level_id: !!memberDetails ? memberDetails.memberLevelId : 0,
              member_status: !!memberDetails ? memberDetails.isActive : "Inactive",
            },
          })
          if (json.code === 1000) {
            let content = json.data.content
            result = content.map((item) => {
              item.tsActId = this.tsActId
              return item
            })
          }
          return result
        } catch (error) {}
      },
      skipItem(item) {
        uni.navigateTo({
          url: `/pages/item/item?id=${item.itemId}&valueId=${item.valueId}&tsActId=${item.tsActId}&hasExpose=true`
        })
      }

    }
  }
</script>

<style lang="less">
  page {
    background-color: #f7f6f4 !important;
  }

  .list-container {
    padding:8rpx 15rpx;

    .list-content {
      .list-item {
        height: 280rpx;
        background-color: #fff;
        margin-bottom: 15rpx;
        display: flex;
        overflow: hidden;

        .item-l {
          position: relative;
          width: 280rpx;

          .img {
            width: 280rpx;
            height: 280rpx;
          }

          .sale-out {
            height: 48rpx;
            background: rgba(174, 174, 174, 0.698);
            color: #fff;
            position: absolute;
            width: 100%;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            z-index: 2;
          }
        }

        .item-r {
          flex: 1;
          padding: 30rpx 24rpx 0;

          &.ts-tag {
            padding: 20rpx 24rpx 0;

            .title {
              margin-bottom: 20rpx;
            }

            .price {
              padding-top: 2rpx;
            }
          }

          .title {
            font-size: 28rpx;
            line-height: 44rpx;
            color: #010101;
            line-clamp: 2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            margin-bottom: 40rpx;
          }

          .general-tag {
            display: flex;
            margin-bottom: 20rpx;

            .m-icon {
              width: 40rpx;
              height: 40rpx;
              font-size: 26rpx;
              color: #000;
              border: 2rpx solid #4d4d4d;
              display: flex;
              line-height: normal;
              align-items: center;
              justify-content: center;
            }

            .m-tag {
              font-size: 18rpx;
              padding-left: 12rpx;
              padding-right: 12rpx;
              background-color: #4d4d4d;
              color: #fff;
              display: flex;
              line-height: normal;
              align-items: center;
            }
          }

          .info {
            font-size: 24rpx;
            color: #aeaeae;
            line-height: 24rpx;
            padding-bottom: 16rpx;
          }

          .price {
            padding-top: 18rpx;
            text-align: left;
            color: #000;
            font-size: 31rpx;

            .rmb {
              font-size: 28rpx;
            }
          }
        }
      }
    }

    .hasMore {
      padding: 36rpx 0 48rpx;
      font-size: 12px;
      color: #444;
      width: 100%;
      text-align: center;
    }
  }
</style>
